<template>
  <div class="footer-wrap">
    <navHead></navHead>
    <div class="serach-wrap">
      <div>
        <input type="text" placeholder="找影视剧" @keyup.13="enterKey" v-model="searchInp" />
        <span class="el-icon-search" @click="searchs()"></span>
      </div>
    </div>

    <listcar v-show="disp" :getSearchData="getSearchData"></listcar>
    <div class="display-wrap" v-show="!disp">
      <img src="../assets/kong_icon.svg" alt="" />
      <span>很抱歉，没有找到相关影视哦</span>
    </div>

    <footers></footers>
  </div>
</template>

<script>
import navHead from "./navHeard";
import listcar from "./listtop/listMain";
import footers from "./footer";
export default {
  name: "",
  data() {
    return {
      disp: false,
      getSearchData: "",
      searchInp: "",
    };
  },
  mounted() {},
  methods: {
    async getSearch(title) {
        let Msearch = await this.$http.get("/search", {
          params: {
            title1: title,
          },
        });
        if (Msearch.data.data.length != 0) {
          this.disp = true;
        } else {
          this.disp = false;
        }
        this.getSearchData = Msearch.data.data;
        // console.log(Msearch.data.data);
    },
    async searchs() {
      let Msearch = await this.$http.get("/search", {
        params: {
          title1: this.searchInp,
        },
      });
      if (Msearch.data.data.length != 0) {
        this.disp = true;
      } else {
        this.disp = false;
      }
      this.getSearchData = Msearch.data.data;
    },
    // 回车搜索
    enterKey(){
      this.searchs()
    }
  },
  components: {
    navHead,
    listcar,
    footers,
  },
  created() {
    let title = this.$route.query.title1;
    this.getSearch(title);
  },
};
</script>

<style lang="scss" scoped>
.serach-wrap {
  width: 100%;
  height: 150px;
  background: rgb(66, 65, 65);
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  input {
    box-sizing: border-box;
    background: #fff;
    width: 630px;
    height: 50px;
    border-radius: 20px;
    outline: none;
    border: none;
    padding: 15px 50px 15px 20px;
    border: 1px solid #999;
    border-radius: 50px;
  }
  div {
    position: relative;
    width: 630px;
    height: 50px;
    > span {
      color: red;
      font-size: 32px;
      position: absolute;
      top: 10px;
      right: 15px;
      z-index: 99;
      cursor: pointer;
    }
  }
}
.display-wrap {
  margin-top: 30px;
  text-align: center;
  img {
    width: 200px;
  }
  span {
    margin: 20px;
    display: block;
    color: rgb(161, 160, 160);
    font-size: 30px;
  }
}
</style>
